import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Rx';

@Component({
  selector: 'app-change-detection',
  templateUrl: './change-detection.component.html',
  styleUrls: ['./change-detection.component.scss']
})
export class ChangeDetectionComponent implements OnInit {
  profile: { name: string, age: number } = {
    name: 'Sunxt',
    age: 31,
  };

  counterStream: Observable<any>;

  constructor() { }

  ngOnInit() {
    this.counterStream = Observable.timer(0, 1000);
    setTimeout(() => {
      this.profile.name = 'New Name';
    }, 5000);
  }

}


// 现在我们来总结一下变化检测的原理：
// Angular 应用是一个响应系统，变化检测总是从根组件到子组件这样一个从上到下的顺序开始执行，它是一棵线性的有向树，
// 默认情况下，变化检测系统将会走遍整棵树，
// 但我们可以使用 OnPush 变化检测策略，在结合 Observables 对象，
// 进而利用 ChangeDetectorRef 实例提供的方法，来实现局部的变化检测，最终提高系统的整体性能。
